<!--

业主代表跟踪落实

-->
<style scoped lang="scss">

  .date-picker{
    width:325px;
    display: block;
    height: 100px;
    clear: both;
    float: left;
  }

  .date-text{
    width:100%;
    height: 45px;
    line-height: 45px;
    font-size: 24px;
    font-family: '微软雅黑';
    color: #777;
  }

  .el-date-editor{
    width: 300px !important;
  }

</style>
<template>
  <my-dialog :subLoading="subLoading" @on-submit="submitHandle" :readOnly="readOnly">
    <my-header slot="header"
               project-sub-text="检查落实情况"  project-sub-title="业主代表跟踪落实"
               :project-name="projectDetail.project_name || ''"  ></my-header>
    <div slot="body">
      <!--<my-textarea v-model="pgsAnalyze" label-text="工程量完成情况"-->
                   <!--placeholder="请填写工程量完成情况" error-message="请填写工程量完成情况"></my-textarea>-->
      <div class="date-picker">
        <span class="date-text">跟踪落实日期</span>
        <el-date-picker v-model="selectDate" size="large" :disabled="readOnly"></el-date-picker>
      </div>
      <my-textarea v-model="crtMeasure" :disabled="readOnly" label-text="进度纠偏落实情况"
                   placeholder="请填写进度纠偏落实情况" error-message="请填写进度纠偏落实情况"></my-textarea>

      <upload :load-msg="'上传附件'" v-if="!readOnly" @loadedFile="uploadSuccessHandle" @onDelete="deleteSuccessHandle" innerText="上传附件，包括照片，视频等文件" formatRestrict="IMAGE,VIDEO,DOCUMENT"></upload>
      <down v-else :files="projectFiles"></down>
    </div>
  </my-dialog>
</template>

<script>

  import { DatePicker } from "element-ui";

  import Dialog from "@/components/Dialog";
  import Header from "@/components/Dialog/Header";
  import Widgets from "@/components/Dialog/Widgets";
  import TextArea from "@/components/Dialog/TextArea";
  import Upload from "@/components/Dialog/Load";
  import Down from  "@/components/Dialog/Down";
  import CheckBox from "@/components/Dialog/Check";
  import _ from 'lodash'
  import  { mapGetters } from "vuex";
  import moment from 'moment'
  moment.locale('zh-CN')
  import taskApi from '@/api/task'
  import projectApi from '@/api/project'

  export default {
    components:{
      'MyDialog':Dialog,
      'MyHeader':Header,
      Widgets,
      Upload,
      Down,
      'MyTextarea':TextArea,
      CheckBox,
      'ElDatePicker':DatePicker
    },
    computed: {
      ...mapGetters([
        'userData'
      ]),
      projectFiles () {
        return _.filter(this.projectDetail.file, file => {
          return file.type === 6
        })
      }
    },
    data(){
      return {
        subLoading: false,
        readOnly: false,
        selectDate: '',
        adjust: true,
        crtMeasure: '',
        files: [],
        projectDetail: {
          file: []
        },
        taskDetail: {}
      }
    },
    created () {
      this.getProjectInfo()
      this.getTaskInfo(() => {
        this.getCheckPlanDetail()
      })
    },
    methods: {
      getProjectInfo () {
        const projectId = this.$route.params.projectId
        this.$store.dispatch('getSingeProject', {token: this.userData.token, pId: projectId}).then(res => {
          this.projectDetail = res.data
        }, (res) => {
          this.$message(`数据请求失败,错误信息:${JSON.stringify(res)}`)
        }).catch(err => {
          this.$message(`系统错误，请求数据错误，错误信息:${JSON.stringify(err)}`)
        })
      },
      getTaskInfo (cb) {
        const taskId = this.$route.params.taskId
        taskApi.getTaskInfo(this.userData.token, taskId).then(res => {
          const result = res.data
          this.taskDetail = result.data
          if (cb) {
            cb()
          }
        }, (res) => {
          this.$message(`数据请求失败,错误信息:${JSON.stringify(res)}`)
        }).catch(err => {
          this.$message(`系统错误，请求数据错误，错误信息:${JSON.stringify(err)}`)
        })
      },
      getCheckPlanDetail () {
        const checkPlanId = this.taskDetail.check_plan_id
        projectApi.getCheckPlanDetail(this.userData.token, checkPlanId).then(res => {
          const result = res.data.data
          if (result.ownerSupervision.data.id) {
            this.readOnly = true
            this.selectDate = result.ownerSupervision.data.supervision_at
            this.crtMeasure = result.ownerSupervision.data.remake
          }
        })
      },
      submitHandle () {
        if (!this.selectDate) {
          this.$message.error('请填写跟踪落实日期')
          return
        }
        if (!this.crtMeasure) {
          this.$message.error('请填写进度纠偏落实情况')
          return
        }
        this.subLoading = true
        const projectId = this.$route.params.projectId
        const taskId = this.$route.params.taskId
        const checkPlanId = this.taskDetail.check_plan_id
        taskApi.ownerCheckResult(this.userData.token, {
          task_id: taskId,
          project_id: projectId,
          check_plan_id: checkPlanId,
          is_approve: this.adjust ? 0 : 1,
          users_id: this.projectDetail.users_id,
          supervision_at: moment(this.selectDate).format('YYYY-MM-DD'),
          remake: this.crtMeasure,
          file: this.files
        }).then(res => {
          this.$message.success('提交成功')
          this.subLoading = false
          this.$router.back()
        }, (res) => {
          this.$message(`数据请求失败,错误信息:${JSON.stringify(res)}`)
        }).catch(err => {
          this.$message(`系统错误，请求数据错误，错误信息:${JSON.stringify(err)}`)
        })
      },
      uploadSuccessHandle ({data}) {
        this.files.push({id: data.id})
      },
      deleteSuccessHandle ({id}) {
        _.remove(this.files, o => {
          return o.id === id
        })
      }
    }
  }
</script>
